import React from 'react'
import { IUdModalContentProps, UdModal } from '@/lib'
import { Button, Icon, Input } from 'antd';
import './index.scss'
import IconList from './IconList';


interface IIconSelectorProps extends IUdModalContentProps {
  value?: string,
  onChange?: any
}

interface IIconSelectorState {

}

class IconSelector extends React.Component<IIconSelectorProps, IIconSelectorState> {
  constructor(props) {
    super(props);
    this.state = {}
  }


  render() {
    const { value } = this.props
    return (
      <div className="icont-template">
        <div className="icon-box">
          <Input value={value} onChange={(e) => {
            this.props.onChange(e.target.value)
          }} />
          <Icon type={value} />
        </div>
        <div className="btn-box">
          <Button type="link" onClick={this.checkIcon}>选择Icon图标</Button>
        </div>
      </div>
    )
  }

  protected checkIcon = () => {
    UdModal.open({
      title: '选择图标',
      width: 1000,
      bodyStyle: { height: '500px', padding: 0 },
      centered: true,
      content: <IconList value={this.props.value} />,
      onOk: (value) => {
        this.props.onChange(value)
      }
    })
  }

}

export default IconSelector
